<template>
  <view v-if="!showSkeleton && showPage" class="content">
    <modal
      v-if="showModal"
      :textAlign="modalType == '1' ? 'left' : 'center'"
      :modalType="modalType"
      :title="modalTitle"
      :content="modalContent"
      :confirmTxt="confirmTxt"
      :cancelColor="modalType == '3' ? '#FFA900' : '#999999'"
      :showCancelBtn="showCancelBtn"
      @cancel="showModal = false"
      @confirm="confirmModal"
    ></modal>
    <view class="top-banner">
      <banner :bannerList="bannerList" :swiperHeight="'100px'"></banner>
    </view>
    <view class="companyWrap">
      <view v-if="isShowCompany" class="companyBox">
        <view class="img">
          <image
            class="pic"
            :src="
              isMan
                ? '../../static/index/photoMan.png'
                : '../../static/index/photoWoman.png'
            "
            mode="aspectFill"
          ></image>
        </view>
        <view class="companyCon">
          <view class="name">{{ myCompany }}</view>
          <view class="position">产品经理</view>
        </view>
        <view class="btn" @click="gotoCompanyPage()">切换公司</view>
      </view>
      <view v-else class="companyNone">
        <view class="tit">暂无公司</view>
        <view class="titSub">请先进行扫码入职</view>
      </view>
    </view>
    <view class="toolWrap">
      <view class="toolTitle">申请中心</view>
      <view class="toolBox">
        <view class="toolItem" @click="scanAgreement">
          <image
            class="toolImg"
            src="../../static/index/ruzhi.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">扫码入职</view>
        </view>
        <view class="toolItem" @click="regularClick()">
          <image
            class="toolImg"
            src="../../static/index/renshi.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">人事信息</view>
        </view>
        <view class="toolItem" @click="regularClick(1)">
          <image
            class="toolImg"
            src="../../static/index/zhuanzheng.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">转正申请</view>
        </view>
        <view class="toolItem" @click="regularClick(2)">
          <image
            class="toolImg"
            src="../../static/index/lizhi.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">离职申请</view>
        </view>
        <view class="toolItem" @click="regularClick(3)">
          <image
            class="toolImg"
            src="../../static/index/diaodong.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">调动申请</view>
        </view>
        <view class="toolItem" @click="regularClick(4)">
          <image
            class="toolImg"
            src="../../static/index/fugong.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">复工申请</view>
        </view>
        <view class="toolItem" @click="regularClick(5)">
          <image
            class="toolImg"
            src="../../static/index/yongyin.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">用印申请</view>
        </view>
      </view>
    </view>

    <view class="toolWrap">
      <view class="toolTitle">我的待办</view>
      <view class="toolBox">
        <view class="toolItem" @click="gotoPage('approvedApply', null, 'A')">
          <image
            class="toolImg"
            src="../../static/index/yishenpi.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">已审批</view>
        </view>
        <view class="toolItem" @click="gotoPage('unApprovedApply', null, 'A')">
          <image
            class="toolImg"
            src="../../static/index/daishenpi.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">待审批</view>
        </view>
        <view class="toolItem" @click="gotoPage('myApply', null, 'A')">
          <image
            class="toolImg"
            src="../../static/index/myshenqing.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">我的申请</view>
        </view>
      </view>
    </view>

    <view class="toolWrap">
      <view class="toolTitle">预定</view>
      <view class="toolBox">
        <view class="toolItem" @click="gotoPage('meeting', 0, 'B')">
          <image
            class="toolImg"
            src="../../static/index/yuding.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">会议室预定</view>
        </view>
      </view>
    </view>

    <view :style="{ marginBottom: '74rpx' }" class="toolWrap">
      <view class="toolTitle">智能填表</view>
      <view class="toolBox">
        <view class="toolItem" @click="gotoPage('research', null, 'B')">
          <image
            class="toolImg"
            src="../../static/index/diaocha.png"
            mode="aspectFill"
          ></image>
          <view class="itemName">在线调查</view>
        </view>
      </view>
    </view>
    <view> </view>
  </view>
  <view v-else class="contentSk">
    <j-skeleton :loading="showSkeleton" :skType="2"></j-skeleton>
  </view>
</template>

<script>
import login from "@/api/login.js";
import { getSafe, getBatchDict } from "@/utils/utils";
import my from '@/mycomponents/vant/__antmove/api/my.js'
export default {
  components: {
    // SimpleDateTimePicker,
	
  },
  data() {
    return {
      showCancelBtn: true, // 是否展示确定按钮
      inductCodeId: "shkpstaff02022062400242513", // 入职码id
      myCompany: "农银金科", // 个人所属公司
      showModal: false, // 是否展示自定义模态框
      modalContent: "", // 自定义模态框内容
      modalTitle: "温馨提示", // 自定义模态框标题
      confirmTxt: "", // 确认按钮文案
      modalType: "1", // 自定义模态框类型（页面多次调用组件，判断类型-取消-确定执行不同回调）1-第一次扫码成功 2-服务授权  3-二维码无效  4-重复扫码（暂时没有流程，不能判断）
      title: "picker-view",
      visible: true,
      indicatorStyle: `height: 50px;`,
      birthday: "",
      userInfo: null,
      isMan: false,
      showPage: false,
      isShowCompany: true,
      bannerList: [
        { icon: "../../static/index/banner.png", itemId: "wxbanner1" },
      ],
      midBannerInterval: "",
      paddingViewHeight: false,
      headerScroll: false,
      showSkeleton: false,
    };
  },
  async created() {
    uni.setStorageSync("phoneModel", uni.getSystemInfoSync().model); // 获取当前手机得系统，主要用于解决系统兼容性问题
    uni.setStorageSync("safeFlag", getSafe()); // 获取手机型号判断底部安全距离
  },
  async onLoad(options) {
    // 是否加密
    // 没有密钥先获取密钥
    // 判断如果是选择公司页面返回并且重新选择了公司 需要更改公司信息
    if (options.company) {
      this.myCompany = options.company;
    }
    if (options.status) {
      // this.status = options.status;
      this.modalType = 2;
      this.modalContent = `感谢您使用薪资管家员工管理模块！我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，在您使用我们的产品前，请务必审慎阅读《薪资管家服务协议及隐私政策》内的所有条款，尤其是一、我们对您的个人信息的收集、保存、使用、保护等规则条款，以及您的用户权利等条款；二、约定我们的限制责任、免责条款；三、您如何行使您的合法权益等内容。`;
      this.modalTitle = "用户协议及隐私保护";
      this.confirmTxt = "同意";
      this.showCancelBtn = true;
      this.showModal = true;
    }
    // uni.setStorageSync("userId", "jkbp00user00O2022052600232501");
	uni.setStorageSync("userId", "jkbpuser2022052700230657");
    // uni.setStorageSync("userId", "jkbp00user00O20220");
  },
  async onShow() {
    this.showPage = true;
    if (uni.getStorageSync("idNo")) return;
    this.showSkeleton = true;
    if (this.$store.state.isCrypto) {
      await this.$getPublicKey();
    }
    // const [err, res] = await login.getUserInfo({});
    // if (res) {
    //   let result = res.data;
    //   uni.setStorageSync("name", result.name);
    //   uni.setStorageSync("custId", result.custId);
    //   uni.setStorageSync("idType", result.idType);
    //   uni.setStorageSync("idNo", result.idNo);
    //   uni.setStorageSync("token", "11111111111");
    //   uni.setStorageSync("department", "数字生态一部");
    //   uni.setStorageSync("post", "开发工程师");
    //   uni.setStorageSync("rank", "P8");
    //   uni.setStorageSync("position", "开发");
    // }
    setTimeout(() => {
      this.showSkeleton = false;
    }, 1000);

    // my.call("getStartupParams", async (result) => {
    //   if (result.params) {
    //     this.showPage = true;
    //     // 调用的mpass小程序
    //     const data = JSON.parse(result.params);
    //     if (data && data.respCode === "FJKBP0000") {
    //       uni.setStorageSync("token", data.accessToken);
    //       if (uni.getStorageSync("idNo")) return;
    //       this.showSkeleton = true;
    //       if (this.$store.state.isCrypto) {
    //         let result = await this.$getPublicKey();
    //       }
    //       const [err, res] = await login.getUserInfo({});
    //       if (res) {
    //         let result = res.data;
    //         uni.setStorageSync("name", result.name);
    //         uni.setStorageSync("custId", result.custId);
    //         uni.setStorageSync("idType", result.idType);
    //         uni.setStorageSync("idNo", result.idNo);
    //       }
    //       this.showSkeleton = false;
    //     } else {
    //       uni.showToast({
    //         title: "登陆失败",
    //         icon: "none",
    //         duration: 800,
    //       });
    //     }
    //   } else {
    //     // 调用的快e通的
    //     my.call(
    //       "startApp",
    //       {
    //         appId: "30804079", //写死，快易通的id
    //         param: {
    //           clientId: "de054387-074c-4233-bdcb-e044cd6cd78e", //掌印(武研申请)
    //           redirectUri:
    //             "http://10.225.36.50:8090/NJZLFinancingApply/shkp/staff/mpaasH5", //掌印H5
    //           state: "123",
    //           scope: "name,certnum,custinfo", //获取掌印权限
    //           responseType: "code",
    //         },
    //         closeCurrentApp: true,
    //       },
    //       function (res) {}
    //     );
    //   }
    // });
    // const phone = await this.getPhone(); //再次获取手机号
    // uni.setStorageSync("phone", phone || "18518598249");
    // uni.hideTabBar({
    //   animation: false,
    // });
  },
  onPageScroll(e) {
    //获取距离顶部距离
    let scrollTop = e.scrollTop;
    scrollTop > 100 ? (this.headerScroll = true) : (this.headerScroll = false);
  },
  onPullDownRefresh() {
    this.initPage();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 2000);
  },

  methods: {
    // 获取手机号
    getPhone() {
      return "18878365645";
      // return new Promise((resolve, reject) => {
      //   my.call(
      //     "abcDatabase",
      //     { method: "getData", key: "mobileNo" },
      //     (res) => {
      //       resolve(res.return);
      //     }
      //   );
      // });
    },
    initPage() {
      let token = uni.getStorageSync("token");
      if (token) {
        // this.getDetail();
      }
      // this.getQuerySquarAndBottomMenu();
    },
    gotoPage(url, status, isPackageA) {
      // let str = "";
      // if (status || status == 0) {
      //   str = "?status=" + status;
      // }
      // if (isPackageA == "A") {
      //   uni.navigateTo({
      //     url: "/packageA/pages/" + url + "/index" + str,
      //   });
      // } else if (isPackageA == "B") {
      //   uni.navigateTo({
      //     url: "/packageB/pages/" + url + "/index" + str,
      //   });
      // } else {
      //   uni.navigateTo({
      //     url: "/packageA/pages/" + url + "/index" + str,
      //   });
      // }
    },

    gotoCompanyPage() {
      // uni.navigateTo({
      //   url: "/packageA/pages/company/index",
      // });
    },

    // 人事信息
    personalClick() {
      // uni.navigateTo({
      //   url: "/pages/components/personnelInfo/index?status=6",
      // });
    },
    // 显示协议弹窗
    scanAgreement() {
      // uni.redirectTo({
      //   url: "/pages/components/agreement/index",
      // });
    },
    // 自定义模态框取消
    cancelModal() {
      // 不管那种状态取消都只关闭模态框组件
      this.showModal = false;
    },
    // 自定义模态框确定
    confirmModal() {
      const { inductCodeId } = this;
      this.showModal = false; // 先关闭模态框
      //
      if (this.modalType == "2") {
        this.scanCode();
      } else if (this.modalType == "1") {
        getBatchDict(); // 批量获取数据字典
        uni.navigateTo({
          url: `/pages/components/inductInfo/index?inductCodeId=${inductCodeId}&status=1`,
        });
      }
    },
    // 页面跳转
    regularClick(status) {},
    async getDetail() {
      this.userInfo = uni.getStorageSync("userInfo");
      if (!this.userInfo) {
        let reqData = {};
        const [err, res] = await login.detailByToken(reqData);
        // 根据结果进行处理
        if (res) {
          // 身份信息存本地或者state TODO信息筛选
          this.userInfo = res;
          uni.setStorageSync("userInfo", this.userInfo);
        } else {
        }
      }
      // 如果有证件号则认为已认证
      if (this.userInfo.codeId) {
        uni.setStorageSync("isAuth", true);
      }
    },
    // 针对个别机型增加底部留白高度
    initPaddingView() {
      let _this = this;
      uni.getSystemInfo({
        success: function (res) {
          let model = ["X", "XR", "XS", "11", "12", "13", "14", "15"];
          model.forEach((item) => {
            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
            if (
              res.model.indexOf(item) != -1 &&
              res.model.indexOf("iPhone") != -1
            ) {
              _this.paddingViewHeight = true;
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}
.item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contentSk {
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #fff;
}
.content {
  width: 100%;
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.content2 {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  overflow: hidden;
  .agreeTitle {
    margin-top: 128rpx;
    font-size: 48rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .agreeConBox {
    position: relative;
    margin-top: 68rpx;
    .agreeIcon {
      position: absolute;
      left: 7rpx;
      top: 10rpx;
      margin-right: 16rpx;
      width: 34rpx;
      height: 34rpx;
    }
    .agreeCon {
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      text-indent: 65rpx;
      display: inline-block;
      line-height: 52rpx;
    }
  }
  .agreeSubCon {
    margin-top: 192rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .agreeBtnWrap {
    width: calc(100% - 0);
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48rpx;
    margin-bottom: 48rpx;
    .agreeCancelBtn,
    .agreeOkBtn {
      flex: 1;
      line-height: 88rpx;
      border-radius: 8rpx;
      background: #ffa900;
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
    .agreeCancelBtn {
      background: #ffffff;
      color: #ffa900;
      margin-right: 32rpx;
      border: 1px solid #ffa900;
    }
  }
}
.top-banner {
  width: 100%;
  // position: relative;
}

.banner-top {
  position: fixed;
  box-sizing: border-box;
  padding: 50rpx 10rpx;
  left: 0;
  width: 100%;
  height: 72rpx;
  display: flex;
  align-items: center;
  z-index: 9;

  .banner-top-qianndao,
  .banner-top-xiaoxi,
  .banner-top-saoyisao {
    width: 44rpx;
    height: 44rpx;
    padding: 0 20rpx;

    image {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .banner-top-search {
    width: 750rpx;
  }
}

.banner-top-active {
  background-color: #1b59f5;
}

// .menuList {
// 	width: 100%;
// }
.companyWrap {
  width: 100%;
  height: 200rpx;
  background-image: url("../../static/index/bg.png");
  border-radius: 20rpx;
  background-size: cover;
  position: relative;
  margin-top: -20rpx;

  .companyBox {
    display: flex;
    flex-direction: row;
    padding-top: 40rpx;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    box-sizing: border-box;

    .img {
      width: 152rpx;
      height: 100%;

      .pic {
        width: 120rpx;
        height: 120rpx;
        margin-left: 32rpx;
      }
    }

    .companyCon {
      flex: 1;
      padding-left: 20rpx;
      padding-top: 33rpx;
      height: 100%;

      .name {
        font-size: 36rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 50rpx;
      }

      .position {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 40rpx;
      }
    }

    .btn {
      width: 150rpx;
      height: 44rpx;
      background: #60a5fe;
      border-radius: 0rpx 20rpx 0rpx 20rpx;
      position: absolute;
      right: 0;
      top: 0rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 44rpx;
    }
  }
  .companyNone {
    font-size: 36rpx;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-family: PingFangSC-Regular;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    .tit {
      margin-top: 53rpx;
      margin-bottom: 10rpx;
    }
    .titSub {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.toolWrap {
  width: 100%;
  margin-top: 40rpx;
  box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 0, 0, 0.08),
    0rpx 3rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);
  border-radius: 20rpx;
  padding: 32rpx 0rpx 12rpx 0rpx;
  box-sizing: border-box;

  .toolTitle {
    font-size: 34rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 34rpx;
    margin-bottom: 40rpx;
    padding-left: 32rpx;
  }

  .toolBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .toolItem {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .toolImg {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 16rpx;
    }

    .itemName {
      font-size: 26rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 40rpx;
    }
  }
}

.mid-banner {
  width: 100%;
  margin-bottom: 10px;
}

.scroll-template {
  width: 100%;
  margin-bottom: 10px;
}

.horizontal-template {
  width: 100%;
  margin-bottom: 10px;
}
</style>
